import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

/**
 * 使用ECharts实现的柱状图组件，支持为每个柱子设置不同的样式
 * @param {Array} data - 数据数组
 * @param {Array} labels - 标签数组
 * @param {Array} colors - 颜色数组
 * @param {number} height - 图表高度
 * @param {Object} options - 额外的ECharts配置选项
 */
const EChartBar = ({ data, labels, colors,trade_date, height, options = {} }) => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      // 如果已经有图表实例，先销毁
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }

      // 创建新的图表实例
      chartInstance.current = echarts.init(chartRef.current);
      
      // 准备数据
      const seriesData = data.map((value, index) => {
        // 默认颜色：前5个红色，后5个绿色，中间灰色
        let itemColor;
        if (index < 5) {
          itemColor = '#ff0000'; // 前5个红色
        } else if (index >= data.length - 5) {
          itemColor = '#00ff00'; // 后5个绿色
        } else {
          itemColor = '#858796'; // 中间灰色
        }
        const category = labels[index];

        console.log('trade_date:',trade_date)
        
        
        // // 根据涨跌情况覆盖颜色
        // if (category.includes('涨') || category.includes('+')) {
        //   itemColor = '#e74a3b'; // 红色 - 上涨
        // } else if (category.includes('跌') || category.includes('-')) {
        //   itemColor = '#1cc88a'; // 绿色 - 下跌
        // } else {
        //   itemColor = '#858796'; // 灰色 - 平盘
        // }
        
        // 为每个柱子设置不同的样式
        return {
          value: value,
          itemStyle: {
            color: itemColor,
            borderRadius: [4, 4, 0, 0] // 柱状图顶部圆角
          },
          label: {
            show: true,
            position: 'top',
            formatter: '{c}',
            fontSize: 10,
            color: '#666'
          }
        };
      });

      // 设置图表选项
      const option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: 'elasticOut',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const dataIndex = params[0].dataIndex;
            const label = labels[dataIndex];
            const value = params[0].value;
            return `${label}: ${value}`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%', // 进一步增加底部边距
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: labels,
          axisLabel: {
            interval: 0,
            rotate: 0, // 取消旋转，避免文字重叠
            fontSize: 10, // 调整字体大小
            color: '#666',
            width: 80, // 设置标签宽度
            overflow: 'break' // 超出宽度时换行
          },
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        yAxis: {
          // type: 'log', // 使用对数刻度
          // logBase: 10, // 使用更小的底数，使差异更明显
          minInterval: 1, // 最小间隔为1，确保小数值也能显示
          axisLabel: {
            show: false // 隐藏y轴上的数字
          },
          splitLine: {
            show: false // 隐藏y轴的横线
          },
          axisLine: {
            show: false // 隐藏y轴线
          },
          axisTick: {
            show: false // 隐藏y轴刻度
          },
          // 处理数值为0的情况，对数刻度不能处理0值
          min: function(value) {
            // 如果最小值是0或很小，设置一个较小的值作为最小值
            return value.min <= 1 ? 0.5 : value.min * 0.5;
          },
          // 设置最大值，使图表不会太高
          max: function(value) {
            return value.max * 1.2; // 增加20%的空间
          }
        },
        series: [
          {
            type: 'bar',
            data: seriesData,
            barWidth: '60%',
            itemStyle: {
              color: function(params) {
                return params.dataIndex < 5 ? '#ff0000' : '#00ff00';
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        ...options // 合并额外的配置选项
      };

      // 设置图表
      chartInstance.current.setOption(option);
      
      // 响应窗口大小变化
      const handleResize = () => {
        chartInstance.current && chartInstance.current.resize();
      };
      
      window.addEventListener('resize', handleResize);
      
      // 清理函数
      return () => {
        window.removeEventListener('resize', handleResize);
        chartInstance.current && chartInstance.current.dispose();
      };
    }
  }, [data, trade_date,labels, colors, options]);

  return (
    <div style={{ width: '100%', height: height || 300, minHeight: '100px', position: 'relative' }}>
      <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 'bold', position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
        涨跌分布({trade_date})
      </h3>
      <div 
        ref={chartRef} 
        style={{ 
          width: '100%', 
          height: '100%'
        }}
      />
    </div>
  );
};

export default EChartBar;